<template>
  <!-- 一级布局容器 -->
  <!-- 首页 -->
  <NavBar />
  <!-- 头部 -->
  <HeaderBar />
  <!-- 吸顶 -->
  <AppHeaderSticky />

  <!-- 二级路由 -->
  <div class="main">
    <router-view></router-view>
  </div>
  <!-- 页脚 -->
  <FooterBar />
</template>

<script>
import { useStore } from 'vuex'
import NavBar from '@/components/navBar'
import FooterBar  from '@/components/footerBar'
import HeaderBar from '@/components/headerBar'
import AppHeaderSticky from '@/components/headerStick'
export default {
  name: 'Layout',
  components:{
    NavBar,
    FooterBar,
    HeaderBar,
    AppHeaderSticky
  },
  setup(){
    const store = useStore()
    // 通过dispatch获取后台数据
    store.dispatch('category/getList')
  }
}
</script>

<style scoped>
/* .main{
  height: 600px;
} */
</style>
